<template>
  <view class="container">
    <!-- 导航栏 -->
    <!-- <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-back" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">医生详情</view>
    </view> -->

    <!-- 医生基本信息 -->
    <view class="doctor-header">
      <image :src="getStaticFilePath(doctorData.imgUrl)" mode="aspectFill" class="doctor-avatar"></image>
      <view class="doctor-info">
        <text class="doctor-name">{{ doctorData.name }}</text>
        <text class="doctor-title">{{ doctorData.jobTitle }}</text>
        <view class="doctor-department">
          <text class="department-name">{{ doctorData.departmentName }}</text>
        </view>
      </view>
    </view>

    <!-- 专业特长 -->
    <view class="section" v-if="doctorData.professionalExpertise">
      <view class="section-title">
        <text class="iconfont icon-stethoscope-line"></text>
        <text>专业特长</text>
      </view>
      <view class="section-content">
        <text class="specialty-text">{{ doctorData.professionalExpertise }}</text>
      </view>
    </view>

    <!-- 教育背景 -->
    <view class="section" v-if="doctorData.education">
      <view class="section-title">
        <text class="iconfont icon-xueshimao"></text>
        <text>教育背景</text>
      </view>
      <view class="section-content">
        <text class="education-text">{{ doctorData.education }}</text>
      </view>
    </view>

    <!-- 个人简介 -->
    <view class="section" v-if="doctorData.introduction">
      <view class="section-title">
        <text class="iconfont icon-awardjiangzhang"></text>
        <text>个人简介</text>
      </view>
      <view class="section-content">
        <text class="introduction-text">{{ doctorData.introduction }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getStaticFilePath } from '@/utils/common'

export default {
  data() {
    return {
      statusBarHeight: 20,
      doctorData: {
        id: '',
        name: '',
        imgUrl: '/static/images/default-avatar.png',
        jobTitle: '',
        departmentName: '',
        professionalExpertise: '',
        education: '',
        introduction: ''
      }
    }
  },
  onLoad(options) {
    // 获取状态栏高度
    try {
      const windowInfo = uni.getWindowInfo()
      this.statusBarHeight = windowInfo.statusBarHeight
    } catch (error) {
      console.error('获取状态栏高度失败:', error)
    }

    // 获取传递的医生数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('doctorData', (data) => {
      this.doctorData = data
    })
  },
  methods: {
    getStaticFilePath,
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #F5F6FA;
}



.back-icon {
  font-size: 48rpx;
  color: #333333;
  font-weight: bold;
}



.doctor-header {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  margin: 32rpx;
  margin-top: calc(88rpx + var(--status-bar-height));
}

.doctor-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  margin-right: 32rpx;
}

.doctor-info {
  flex: 1;
}

.doctor-name {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
}

.doctor-title {
  font-size: 28rpx;
  color: #4B7BFF;
  background-color: rgba(75, 123, 255, 0.1);
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  margin-bottom: 16rpx;
  display: inline-block;
}

.doctor-department {
  display: flex;
  align-items: center;
}

.department-name {
  font-size: 28rpx;
  color: #666666;
}

.section {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 0 32rpx 32rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
}

.section-title .iconfont {
  margin-right: 12rpx;
  color: #4B7BFF;
}

.section-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
}

.specialty-text, .education-text, .introduction-text {
  white-space: pre-wrap;
}
</style> 